<template>
    <div class="bi-list" :class="boxClass" >
        <div class="bi-list-content" :style="listStyle" :class="listClass">
            <div class="bi-list-item" v-for="(item,index) in data"  >
                <div class="item-content" v-if="!loading">
                    <slot :item="item" :index="index" ></slot>
                </div>
                <bi-icon data="fa-remove" class="close"  :disabled="disabled"  v-if="del" @click="handleDel(index,item)"></bi-icon>
            </div>

            <div class="bi-list-add">
                <bi-button :type="addButtonType" style="flex-shrink: 0;" icon="fa-plus" @click="$emit('add')" :disabled="disabled" >{{addButtonLabel}}</bi-button>
            </div>
        </div>
        
        
    </div>
</template>


<script>
export default {
    emits:['add','del'],
    data(){
        return {
            list:[],
            loading:false
        }
    },
    watch:{
        data:{
            handler(value){
                
            },
            deep:true,
            immediate:true
        }
    },
    methods:{
        handleDel(index,item){

            if (this.disabled) return;
            if (this.delConfirm){
                this.$confirm('确定要删除吗',(re)=>{
                    if (re){
                        this.loading = true;
                        this.$emit('del',index,item)
                    }
                });
            }else{
                this.loading = true;
                this.$emit('del',index,item)
            }

            this.$nextTick(()=>{
                this.loading = false;
            });
        }
    },
    computed:{
        boxClass(){
            let classList = [];

            if (this.disabled){
                classList.push('disabled');
            }

            return classList;

        },
        listStyle(){
            if (this.maxHeight){
                return {
                    'max-height':parseInt(this.maxHeight)+'px'
                }
            }
        },
        listClass(){
            let classList = [];
            classList.push('bi-list-'+this.dir);
            
            if (this.type !=''){
                classList.push('bi-list-'+this.type);
            }
            if (this.maxHeight){
                 classList.push('y-auto');
            }
            return classList;
        }
    },
    props:{
        data:{
            type:Array,
            default:[]
        },
        del:{
            type:Boolean,
            default:true
        },
        delConfirm:{
            type:Boolean,
            default:false
        },
        dir:{
            type:String,
            default:'column'
        },
        type:{
            type:String,
            default:''
        },
        disabled:{
            type:Boolean,
            default:false
        },
        addButtonType:{
            type:String,
            default:'light'
        },
        addButtonLabel:{
            type:String,
            default:'添加'
        },
        maxHeight:{
            type:[String,Number],
            default:''
        }
    }
}

</script>

<style>


.bi-list .bi-list-content{
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
}
.bi-list .bi-list-row{
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.25em;
}

.bi-list .bi-list-column{
    flex-direction: column;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0.25em;
}
.bi-list .bi-list-column .item-content{
    flex: 1;
}

.bi-list .bi-list-content.y-auto{
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}


.bi-list-item{
    display: flex;
    align-items: center;
    
}

.bi-list-item .close{
    padding:0.25em;
    cursor: pointer;
}


.bi-list-item .close.disabled{
    cursor:default;
}

.bi-list .bi-list-border .bi-list-item{
    padding:  0.15em 0.25em;
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-tertiary-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

.bi-list .bi-list-border.disabled .bi-list-item{
    background-color: var(--bs-gray-200);
    border-color: var(--bs-gray-300);
    border-style: dashed;
    color:var(--bs-gray-400);
}
</style>